<template>
	<div class="account-drawer-mobile">
		<van-popup v-model="visible" :duration="0" :style="{ width: '100%', height: '100%' }">
			<div class="popup flex-column">
				<van-nav-bar title="广告账户账户" left-arrow @click-left="goBack">
					<template #right>
						<div class="nav-custom" @click="onShowFilter">
							<span>筛选</span>
							<i class="custom-icon custom-icon-shaixuan"></i>
						</div>
					</template>
				</van-nav-bar>
				<div class="total-info">
					<div class="mr-3">
						<div class="total-info_num">{{ titleDetail.today_cost || 0 }}</div>
						<div class="total-info_title">今日消耗</div>
					</div>
					<div class="mr-3">
						<div class="total-info_num">
							{{ titleDetail.today_cost_adv_count || 0 }}
						</div>
						<div class="total-info_title">今日有消耗账户数</div>
					</div>
					<div class="mr-3">
						<div class="total-info_num">
							{{ titleDetail.balance_insufficient_adv_count || 0 }}
						</div>
						<div class="total-info_title">余额不足账户数</div>
					</div>
				</div>
				<div class="flex-1 popup-body">
					<el-table
						:data="tableData"
						show-summary
						:summary-method="getSummaries"
						stripe
						:fit="false"
						:max-height="tableHeight"
						v-loading="loading"
					>
						<template v-for="(item, index) in tableTitle">
							<!-- v-else -->
							<el-table-column
								:key="index"
								:prop="item.prop"
								:label="item.label"
								:fixed="item.prop === 'advertiser_name' ? true : false"
								:minWidth="item.width"
								:show-overflow-tooltip="true"
								:sortable="true"
							>
							</el-table-column>
						</template>
					</el-table>
				</div>
			</div>
		</van-popup>
		<!-- 筛选 -->
		<van-popup v-model="showFilter" position="right" :style="{ width: '80%', height: '100%' }">
			<div class="popup-body filter-body">
				<div class="flex-1">
					<van-form validate-first>
						<van-field
							readonly
							clickable
							name="datetimePicker"
							:value="search.dateText"
							label="时间"
							placeholder="点击选择时间"
							@click="showCalendar = true"
						/>
					</van-form>
				</div>
				<div class="popup-btn">
					<van-button class="btn-list" @click="onShowFilterCancel()">取消</van-button>
					<van-button class="btn-list active" @click="onShowFilterConfirm()"
						>确认</van-button
					>
				</div>
			</div>
		</van-popup>
		<!-- 日历组件 -->
		<!-- <van-popup v-model="showCalendar" position="bottom"> -->
		<van-calendar
			v-model="showCalendar"
			type="range"
			color="#156DFF"
			:min-date="minDate"
			@confirm="onCalendarConfirm"
		/>
		<!-- </van-popup> -->
	</div>
</template>

<script>
	import dayjs from "dayjs";
	import { Popup, NavBar, Calendar, Form, Field, Button } from "vant";

	export default {
		components: {
			VanPopup: Popup,
			VanNavBar: NavBar,
			VanCalendar: Calendar,
			VanForm: Form,
			VanField: Field,
			VanButton: Button
		},
		data() {
			return {
				visible: false,
				info: {},
				titleDetail: {},

				loading: false,
				tableData: [],
				tableTitle: [],
				totalRow: [],
				// tableHeight: this.systemInfo?.windowHeight - 44 - this.systemInfo?.statusBarHeight - 12,
				tableHeight: 667,
				search: {
					date: [
						dayjs().startOf("day").format("YYYY-MM-DD"),
						dayjs().endOf("day").format("YYYY-MM-DD")
					],
					dateText: ""
				},

				// 筛选弹窗
				showFilter: false,
				showCalendar: false,
				minDate: new Date(2010, 0, 1)
			};
		},
		created() {
			this.tableHeight = document.body.clientHeight - 140;
		},
		methods: {
			open(info = {}) {
				this.info = info;
				this.titleDetail = {};
				this.visible = true;

				this.search.dateText = `${dayjs(this.search.date[0]).format("YYYY-MM-DD")} ~ ${dayjs(
					this.search.date[1]
				).format("YYYY-MM-DD")}`;

				this.getTitleDetail();
				this.getList();
			},
			goBack() {
				// this.$router.go(-1);
				this.visible = false;
			},
			onShowFilter() {
				this.showFilter = true;
			},
			async getTitleDetail() {
				const res = await this.$service.accountManage.promoteUser({
					supplier_id: this.info.id
				});
				// console.log(res);
				this.titleDetail = res;
			},
			async getList() {
				this.loading = true;
				const query = {
					...this.search,
					supplier_id: this.info.id
				};
				let { tableTitle, stats_list, total_metrics } = await this.$service.accountManage
					.advertiserStatsList(query)
					.finally(() => {
						this.loading = false;
					});

				let columns = (tableTitle ?? []).map((v, i) => {
					return {
						disable: i == 0,
						fixed: i == 0,
						prop: v.key,
						label: v.name,
						width: v.width,
						minWidth: 140,
						sortable: true
					};
				});
				// this.initColumns = columns;
				this.totalRow = total_metrics;
				!this.tableTitle.length && (this.tableTitle = columns);
				let dataList = stats_list.map((e) => ({
					...e,
					...e.metrics
				}));

				this.tableData = dataList ?? [];
			},
			getSummaries({ columns, data }) {
				return columns.map((column, index) => {
					if (index === 0) {
						return "合计";
					}
					for (let i in this.totalRow) {
						if (column.property == i) {
							return this.totalRow[i];
						}
					}
				});
			},
			// 筛选弹窗
			onCalendarConfirm(date) {
				const [start, end] = date;
				const formatStart = dayjs(start).format("YYYY-MM-DD");
				const formatEnd = dayjs(end).format("YYYY-MM-DD");

				this.showCalendar = false;
				this.search.date = [formatStart, formatEnd];
				this.search.dateText = `${formatStart} ~ ${formatEnd}`;
			},
			onShowFilterCancel() {
				this.showFilter = false;
			},
			onShowFilterConfirm() {
				this.showFilter = false;
				this.getList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep {
		.van-nav-bar .van-icon {
			color: #333 !important;
		}
		.el-input.is-disabled .el-input__inner {
			background-color: transparent;
		}
	}
	.account-drawer-mobile {
		// ::v-deep {
		// 	.el-table table th {
		// 		background-color: #fff;
		// 	}
		// }
		.popup {
			height: 100%;
			overflow: hidden;
			.nav-custom {
				color: #666;
				.custom-icon-shaixuan {
					font-size: 12px;
					margin-left: 4px;
				}
			}
			.total-info {
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #666;
				padding: 20px 0;
				border-bottom: 10px solid #f5f5f5;
				// margin-bottom: 10px;
				.mr-3 {
					width: 33.3%;
					text-align: center;
				}
				&_num {
					color: #000;
					font-weight: bold;
					font-size: 16px;
				}
				&_title {
					font-size: 12px;
					color: #999;
					margin-top: 10px;
				}
			}
			&-body {
				position: relative;
				overflow: auto;
				background: #f1f1f1;
				box-sizing: border-box;
				// border-top: 1px solid #dfdfdf;

				.list-item {
					height: 134px;
					padding: 0 14px;
					margin-top: 10px;
					background-color: #fff;
					&_title,
					&_cell {
						display: flex;
						align-items: center;
						padding: 12px 0;
					}
					&_title {
						border-bottom: 0.7px solid #f0f0f0;
						justify-content: space-between;
						.view-number {
							font-size: 12px;
							color: $primary;
							.el-icon-arrow-right {
								// color: $primary;
								margin-left: 2px;
							}
						}
					}
					&_cell {
						justify-content: space-between;
						.cell {
							// width: 25%;
							font-size: 12px;
							&-title {
								color: $color-gray;
								margin-bottom: 8px;
							}
						}
					}
				}
			}
		}
		// 筛选
		.filter-body {
			display: flex;
			flex-direction: column;
			height: 100%;
			.popup-btn {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				height: 50px;
				border-top: 0.7px solid #f0f0f0;
				background-color: #fff;
				.btn-list {
					width: 40%;
					height: 34px;
					text-align: center;
					font-size: 12px;
					border-radius: 50px;
					// border: none;
					&.active {
						color: #fff;
						background-color: $primary;
					}
				}
			}
		}
	}
</style>
